<template>
  <view class='school_info_new'>
    <view class='title'>
      <view style='font-size: 34rpx;'>
        <text>{{ userSchoolInfo.name }}</text>
        <picker @change='bindPickerChange' range-key='name' :range='schoolList'
                style='display: inline-block;'>
          <image src='/static/location_icon.png' mode=''></image>
        </picker>
      </view>
      <view style='font-size: 56rpx;'>校园卡代理平台</view>
      <view style='opacity: 0.5;'>{{ userSchoolInfo.slogan }}</view>
    </view>
    <image :src='userSchoolInfo.icon' mode='scaleToFill'></image>
  </view>
  <view class='content'>
    <!-- 店铺信息 -->
    <view class='function'>
      <view class='grid-item-box' v-for='(item, index) in functionList' :index='index' :key='index'
            @click='navigationPage(item)'>
        <uni-icons color='#CE5661' custom-prefix='iconfont' :type='item.type' size='30'></uni-icons>
        <text class='text'>{{ item.title }}</text>
      </view>
    </view>
    <!-- banner -->
    <view class='banner'>
      <swiper :indicator-dots='true' :autoplay='true' :interval='3000' :duration='1000'>
        <swiper-item v-for='item in bannerList' :key='item.id' @click='handleGo(item)'>
          <image :src='item.image' style='height: 100%;width: 100%;' mode=''></image>
        </swiper-item>
      </swiper>
    </view>
    <!-- 学校精品 -->
    <view class='product-list'>
      <view class='product-item' v-for='(item, index) in shopList' :key='index'
            @click='handleDetail(item)'>
        <image :src='item.image'></image>
        <view class='right'>
          <view class='title'>{{ item.name }}</view>
          <view class='desc'>{{ item.desc }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import {
  checkProxy,
  getSchool,
  getSchoolList,
  getShop,
  switchSchool,
  getBanner
} from '@/api/list.js'

const userSchoolInfo = ref({})
const schoolList = ref([])
const shopList = ref([])
const bannerList = ref([])
const functionList = ref([
  {
    type: 'icon-zaixiankefu',
    title: '在线客服',
    page: '/pages/online-service/index'
  },
  {
    type: 'icon-a-jianqu61',
    title: '分享店铺',
    page: '/pages/share-shop/share-shop'
  },
  {
    type: 'icon-fuli',
    title: '校园通告',
    page: '/pages/gift-list/index'
  },
  {
    type: 'icon-dingdan_dingdanleixingshezhi',
    title: '我的订单',
    page: '/pages/my-order/index'
  }
])

// 判断是否代理权限
const isProxy = () => {
  checkProxy().then(res => {
    if (res.data) {
      uni.showTabBar({
        animation: true
      })
      uni.setTabBarStyle({
        color: '#9799a5',
        selectedColor: '#B10D0C'
      })
      uni.setTabBarItem(
        {
          index: 0,
          pagePath: 'pages/index/index',
          text: '首页',
          iconPath: 'static/home.png',
          selectedIconPath: 'static/home.png'
        },
        {
          index: 1,
          pagePath: 'pages/agency-my/agency-my',
          text: '我的',
          iconPath: 'static/getCardHover.png',
          selectedIconPath: 'static/getCardHover.png'
        }
      )
    } else {
      uni.hideTabBar()
    }
  })
}
// 重新获取所有信息
const retryInfo = async () => {
  await getUserSchool()
  await getAllSchool()
  await getBannerList()
  await getShopList()
}
// 获取当前用户的学校
const getUserSchool = async () => {
  const res = await getSchool()
  userSchoolInfo.value = res.data
}
// 获取所有学校信息
const getAllSchool = async () => {
  const res = await getSchoolList()
  schoolList.value = res.data
}
// 获取所有Banner
const getBannerList = async () => {
  const res = await getBanner()
  bannerList.value = res.data
}
// 获取所有商品
const getShopList = async () => {
  const res = await getShop()
  shopList.value = res.data
}
// 切换school
const bindPickerChange = (e) => {
  switchSchool({
    id: schoolList.value[e.detail.value].id
  }).then(res => {
    uni.showToast({
      title: '切换成功',
      icon: 'success'
    })
    retryInfo()
  })
}

// onShow
onShow(() => {
  // 判断是否代理
  if (!uni.getStorageSync('token')) {
    uni.redirectTo({
      url: '/pages/login/index'
    })
  } else {
    retryInfo()
  }
})
onLoad((options) => {
  if (options.schoolId) {
    uni.setStorageSync('schoolId', options.schoolId)
  } else {
    uni.setStorageSync('schoolId', null)
  }
  if (options.proxyId) {
    uni.setStorageSync('proxyId', options.proxyId)
  } else {
    uni.setStorageSync('proxyId', null)
  }
  // 判断是否有token
  isProxy()
  if (!uni.getStorageSync('token')) {
    uni.redirectTo({
      url: '/pages/login/index'
    })
  }
  if (options.schoolId) {
    uni.redirectTo({
      url: '/pages/login/index'
    })
  }
})


// 进入商品详情
const handleDetail = (item) => {
  uni.navigateTo({
    url: '/pages/get-card/index',
    success: function(res) {
      // 通过eventChannel向被打开页面传送数据
      res.eventChannel.emit('acceptDataFromOpenerPage', { data: item })
    }
  })
}
// 进入预览页面
const handleGo = (item) => {
  uni.navigateTo({
    url: `/pages/web-view/index?url=${item.url}`
  })
}
// 进入页面
const navigationPage = (item) => {
  uni.navigateTo({
    url: item.page
  })
}
// onShareTimeline(() => {
// 	return {
// 		title: '商通线上商城',
// 		path: '/pages/index/index',
// 		imageUrl: 'https://cdn.uviewui.com/uview/swiper/1.jpg'
// 	}
// })
</script>

<style lang='scss'>
.school_info_new {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 340rpx;
  // background全部展示出来
  background: linear-gradient(160deg, #CD231B 0%, #E9A29E 53%, #FDFDFD 100%);

  .title {
    flex: 1;
    height: 90%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-evenly;
    margin-left: 34rpx;

    image {
      height: 50rpx;
      width: 50rpx;
      margin: 0 0 0 30rpx;
    }
  }

  image {
    margin: 20rpx;
    width: 280rpx;
    height: 280rpx;
  }

}

.content {
  padding: 16rpx 32rpx;

  .function {
    display: flex;
    margin-bottom: 15rpx;
    padding: 12rpx 0;
    font-size: 24rpx;
    justify-content: space-around;
    border-radius: 10rpx;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);

    .grid-item-box {
      width: 140rpx;
      // position: relative;
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 30rpx 0;
      margin: 6rpx;
      height: 60rpx;
      border-radius: 10rpx;

      text {
        margin-top: 10rpx;
      }
    }
  }

  .banner {
    width: 100%;
    margin-top: 30rpx;
  }

  .product-list {
    display: flex;
    flex-direction: column;

    .product-item {
      // border: 2rpx solid #F67F66;
      box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
      display: flex;
      margin: 24rpx 0;
      padding: 6rpx 12rpx 12rpx;
      border-radius: 12rpx;

      image {
        height: 200rpx;
        width: 200rpx;
        border-radius: 16rpx;
      }

      .right {
        padding: 12rpx 0 24rpx 24rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;

        .title {
          font-size: 36rpx;
        }

        .desc {
          color: gray;
          font-size: 24rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
}
</style>
